<template>
  <div class="admin-layout">
    <AdminSider />
    <main class="admin-content">
      <div class="admin-header">
        <AdminUserInfo />
      </div>
      <div class="admin-content-inner">
        <router-view />
      </div>
    </main>
  </div>
</template>

<script lang="ts" setup>
import { useRouter, useRoute } from 'vue-router'
import AdminSider from '@/components/admin/AdminSider.vue'
import AdminUserInfo from '@/components/admin/AdminUserInfo.vue'

const router = useRouter()
const route = useRoute()

function goTo(path: string) {
  if (route.path !== path) {
    router.push(path)
  }
}
function isActive(path: string) {
  return route.path === path
}

// 预留API接口调用位置
// 例如：获取统计信息、初始化数据等
// import { fetchBannerList } from '@/api/admin/banner'
// import { fetchProductList } from '@/api/admin/product'
// import { fetchCategoryList } from '@/api/admin/category'
// import { fetchHelpReplyList } from '@/api/admin/help'
</script>

<style scoped>
.admin-layout {
  display: flex;
  height: 100vh;
  width: 100vw;
  background: linear-gradient(120deg, #e3edfa 0%, #f6faff 100%);
}
.admin-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: transparent;
  min-width: 0;
}
.admin-header {
  width: 100%;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 48px 0 0;
  box-sizing: border-box;
  background: transparent;
}
.admin-content-inner {
  width: 80%;
  min-height: 80vh;
  background: #fafdff;
  border-radius: 20px;
  box-shadow: 0 8px 32px 0 rgba(120, 160, 255, 0.10);
  padding: 48px 32px;
  margin: 32px auto 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: box-shadow 0.3s;
}
</style>
